<template>
  <div id="ec-friends">
    <!--<div class="ec-f-top">-->
      <!--<ectitle :title="titleData"></ectitle>-->
    <!--</div>-->
    <div class="ec-f-tab">
      <div class="ec-f-tab1" data-index="1" v-bind:class="{'ec-f-tabA':tabChange}" @click="tabGroup">我的群</div>
      <div class="ec-f-tab2" data-index="2" v-bind:class="{'ec-f-tabA':!tabChange}" @click="tabPerson">多人聊天</div>
    </div>
    <div class="ec-f-con">
      <transition name="tab" mode="out-in" appear>
        <div class="ec-f-group" v-if="tabChange">
          <div class="ec-f-con-t">
            <div></div>
            <span>我加入的群</span>
          </div>
          <div class="friendList" v-for="item in joinGroup.data">
            <router-link to='/common/ecFriend/ecGroupTip?title=请选择'>
              <groupitem>
                <span slot="gi-name">{{item.name}}</span>
                <img slot="gi-name-pic" :src="item.stateImg" alt=""/>
                <img slot="gi-img" :src="item.imgSrc" alt=""/>
                <span slot="gi-grade">{{item.grade}}</span>
                <span slot="gi-loc">{{item.loc}}</span>
                <span slot="gi-intro">{{item.intro}}</span>
              </groupitem>
            </router-link>
          </div>
          <div class="ec-f-con-t"  v-if="tabChange">
            <div></div>
            <span>我管理的群</span>
          </div>
          <div class="friendList" v-for="item in myGroup.data">
            <router-link :to="{path:'/common/ecChat',query:{username:item.name,imgSrc:item.imgSrc,title:titleData}}" tag="div" slot="gi-infoLink">
              <groupitem>
                <span slot="gi-name">{{item.name}}</span>
                <img slot="gi-name-pic" :src="item.stateImg" alt=""/>
                <img slot="gi-img" :src="item.imgSrc" alt=""/>
                <span slot="gi-grade">{{item.grade}}</span>
                <span slot="gi-loc">{{item.loc}}</span>
                <span slot="gi-intro">{{item.intro}}</span>
              </groupitem>
            </router-link>
          </div>
        </div>
      </transition>
      <transition name="tab" mode="out-in" appear>
        <div class="ec-f-per" v-if="!tabChange">
          <div class="ec-f-con-t">
            <div></div>
            <span>我的好友</span>
          </div>
          <div class="friendList" v-for="item in myFriend.data">
            <router-link :to="{path:'/common/ecChat',query:{username:item.name,imgSrc:item.imgSrc,title:titleData}}" tag="div" slot="gi-infoLink">
              <groupitem>
                <span slot="gi-name">{{item.name}}</span>
                <img slot="gi-name-pic" :src="item.stateImg" alt=""/>
                <img slot="gi-img" :src="item.imgSrc" alt=""/>
                <span slot="gi-grade">{{item.grade}}</span>
                <span slot="gi-loc">{{item.loc}}</span>
                <span slot="gi-intro">{{item.intro}}</span>
              </groupitem>
            </router-link>
          </div>
        </div>
      </transition>
    </div>
    <transition name="tip" mode="out-in" appear>
      <router-view></router-view>
    </transition>
    <slot name="test"></slot>
  </div>
</template>
<script>
  import ectitle from './ec-title'
  import groupitem from './groupitem'
  export default{
    name:'ec-friends',
    data:function(){
      return {
        tabChange:true,
        joinGroup:{
          url:'static/engcorner.json',
          data:[]
        },
        myGroup:{
          url:'',
          data:[]
        },
        myFriend:{
          url:'static/engcorner.json',
          data:[]
        },
        titleData:"聊天室"
      }
    },
    components:{
      'ectitle':ectitle,
      'groupitem':groupitem
    },
    mounted:function(){
      this.getGroup();
    },
    methods:{
      tabGroup:function(){
        this.tabChange=true;
        this.getGroup();
      },
      tabPerson:function(){
        this.tabChange=false;
        this.$http.get(""+this.myFriend.url).then(function(response){
          this.myFriend.data=response.data.myFriend;
        })
      },
      getGroup:function(){
        this.$http.get(""+this.joinGroup.url).then(function(response){
          this.joinGroup.data=response.data.friends[0].data;
          this.myGroup.data=response.data.friends[1].data;
        })
      }
    }
  }
</script>
<style>
  #ec-friends{
    height:100%;
    position: relative;
  }
  .ec-f-tab{
    display: flex;
    font-size: 14px;
  }
  .ec-f-tab>div{
    width: 50%;
    padding:19px 0 12px;
    text-align: center;
    background: #6FE3A2;
    color:#fff;
    font-size: 14px;
  }
  .ec-f-tab>.ec-f-tabA{
    background: #F6B563;
  }
  .ec-f-con{
    background: #F4F4F4;
    display-inside: flex;
  }
  .ec-f-con-t{
    padding:10px 5px;
    display: flex;
  }
  .ec-f-con-t>div{
    width: 8px;
    height: 8px;
    margin: 0 18px;
    border-radius: 100%;
    border: 4px solid #ED6942;
  }
  .ec-f-con-t>span{
    font-size: 12px;
  }
  .tab-enter-active,.tab-leave-active{
    transform: translateX(0);
    transition:all linear .5s;
  }
  .tab-enter,.tab-leave-active{
    transform: translateX(-400px);
    opacity: 0;
  }
  .tip-enter-active,.tip-leave-active{
    transform: scale(1);
    transition: all .5s;
  }
  .tip-enter,.tip-leave-active{
    transform: scale(0);
    opacity: 0;
  }
  @media (max-width: 320px){
    .ec-f-con-t{
      padding: 5px;
    }
    .ec-f-con-t>div {
      width: 7px;
      height: 7px;
      margin: 0 20px;
      border-radius: 100%;
      border:2px solid #ED6942;
    }
  }
</style>
